<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="google" content="notranslate" />
<title>图表</title>
<link href="../static/ext-6.5.3/build/classic/theme-crisp/resources/theme-crisp-all.css"  rel="stylesheet" type="text/css" />
<link href="../static/ext-6.5.3/build/examples/kitchensink/crisp-en/resources/KitchenSink-all.css"    rel="stylesheet" type="text/css" />
<link href="../static/css/style.css" rel="stylesheet" type="text/css" />

<script src="../static/ext-6.5.3/build/ext-all.js" type="text/javascript"></script>
<script src="../static/ext-6.5.3/build/classic/locale/locale-zh_CN.js" type="text/javascript"></script>
<script src="../static/ext-6.5.3/build/packages/charts/classic/charts.js"></script>
<!--script src="js/common.js" type="text/javascript"></script-->
<script src="../static/js/main_left.js" type="text/javascript"></script>
<script src="../static/js/main_top.js" type="text/javascript"></script>
<script src="../static/js/model.js" type="text/javascript"></script>
<script src="../static/widget/colorbutton.js" type="text/javascript"></script>
<style>
html, body {
    margin: 0;
    height: 100%;
}
.transform_logo{color:green;}
</style>
<script>
function toastSuccess(message) {
    Ext.toast({
        html: message?message:'操作成功！',
        title: '系统提示',
        width: 200,
        align: 't'
    });
}

function messageAlert(message) {
    Ext.Msg.alert('操作失败,错误原因如下:', message)
}
function ajaxPost(url,para) {
    Ext.getBody().mask("请稍等..."); 
    Ext.Ajax.request({
        url: url,
        params: para,
        success:function(response, opts) {
            console.log(response.responseText)
            var res = Ext.JSON.decode(response.responseText)
            Ext.getBody().unmask()
            if (res.success) {
                messageAlert(res.message)
            } else {
                toastSuccess(res.message)
            }
            //func(response)
        },
        failure: function(response, opts) {
            alert(1)
        }
    }); 
}
</script>    


<script>
            //Ext.Loader.setPath('Ext', '../static/Ext/ux/colorpick');
            //var d = Ext.create("Hy.Grid",{title: '系统登录'})
            Ext.define('MyApp.view.main.MainController', {
                extend : 'Ext.app.ViewController',

                routes : {
                    ':id1/:id2/:id3/:id4' : 'onHandle',
                    ':id1/:id2/:id3' : 'onHandle',
                    ':id1/:id2' : 'onHandle',
                    ':id' : 'onHandle'
                },

                onHandle : function(id1,id2,id3,id4) {
                    
                    
                }
            });

      

            Ext.on("resize", function(){appPanel.updateLayout()}, this);

            Ext.application({
                name: "MyApp",
                listen : {
                    controller : {
                        '#' : {
                            unmatchedroute : 'onUnmatchedRoute'
                        }
                    }
                },

                
                mainView: 'MyApp.view.main.MainController',
                onUnmatchedRoute : function(hash) {
                    alert(112)
                },

                launch: function() {

                    Ext.tip.QuickTipManager.init();
                    Ext.EventManager.onWindowResize(function(width,height) {});



                    window.appPanel = Ext.create('Ext.panel.Panel', {
                        title:"",
                        layout: 'border',
                        
                        defaults: {
                            collapsible: false,
                            split: false,
                            bodyPadding: 0
                        }, 
                        height:'100%',
                        width: '100%',  
                        
                        items:[
                            {
                                title: '',
                                region: 'south',
                                height: 315,
                                //minHeight: 75,
                                //maxHeight: 150,
                                items:[

                                    {
                                        xtype:'tabpanel',
                                        width: '100%',
                                        id:'chartConfig',
                                        height: 300,
                                        title:'',
                                        autoDestroy:false,
                                        tabBarHeaderPosition: 0,
                                        plain:true,
                                        defaults: {
                                            bodyPadding: 10,
                                            scrollable: true
                                        },
                                        tools:[
                                            {
                                                iconCls: 'x-fa fa-bars',
                                                handler: function(event, toolEl, panelHeader) {
                                                    
                                                }
                                            },
                                            {
                                                iconCls: 'x-fa fa-align-center',
                                                handler: function(event, toolEl, panelHeader) {
                                                    
                                                }
                                            },
                                            {
                                                iconCls:'x-fa fa-align-justify',
                                                callback: function(panel, tool, event) {
                                                    
                                                }
                                            }
                                        ],
                                        items: [
                                            
                                            <g:each in="${me.Util.optionTabs}" var="it" status="i">

                                            {
                                                title: '${it.name}',
                                                id:'tab_${it.name}',
                                                //width:900,
                                                layout:'hbox',
                                                selected:true,
                                                bodyPadding: 0,
                                                closeAction:'hide',
                                                defaults: {
                                                    bodyPadding: 0,
                                                    scrollable: true
                                                },
                                                items:[
                                                    {
                                                                xtype: 'toolbar',
                                                                dock: 'left',
                                                                border:false,
                                                                items: [
                                                                    <g:each in="${it.category}" var="it1" status="j">
                                                                    {
                                                                        text: '${it1.name}'
                                                                    },
                                                                    </g:each>
                                                                ]
                                                            },
                                                    {
                                                        xtype:'form',
                                                        border:false,
                                                        width:1800,
                                                        id:'form_${it.name}',
                                                        height:260,
                                                        items:[
                                                            <g:each in="${it.category}" var="it1" status="j">
                                                            {
                                                                xtype: 'fieldset',
                                                                title: '${it1.name}',
                                                                collapsible: false,
                                                                layout: 'column',
                                                                defaults: {
                                                                    layout: 'form',
                                                                    xtype: 'container',
                                                                    defaultType: 'textfield',
                                                                    style: 'width: 33.333%;'
                                                                },

                                                                items: [
                                                                

                                                                <g:each in="${[1,2,3]}" var="it3" status="k">
                                                                    {
                                                                        items: [

                                                                            <g:each in="${it1.options}" var="it4" status="l">
                                                                                <g:if test="${l%3==k}" >

                                                                                    <g:if test="${it4.optionType=='["number"]'}" >
                                                                                        
                                                                                        { xtype:'numberfield',fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}' },
                                                                                    </g:if>


                                                                                    <g:if test="${it4.optionType=='["string"]'}" >
                                                                                        
                                                                                        { xtype:'textfield',fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}' },
                                                                                    </g:if>

                                                                                    <g:if test="${it4.optionType=='["Object"]'}" >
                                                                                        
                                                                                        { xtype:'textfield',fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}' },
                                                                                    </g:if>
                                                                                    
                                                                                    <g:if test="${it4.optionType=='["boolean"]'}" >
                                                                                        
                                                                                        {
                                                                                            xtype: 'radiogroup',
                                                                                            fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}',
                                                                                            width:200,
                                                                                            items: [
                                                                                                {boxLabel: '是', inputValue: 1},
                                                                                                {boxLabel: '否', inputValue: 2, checked: true}
                                                                                            ]
                                                                                        },
                                                                                    </g:if>

                                                                                    <g:if test="${it4.optionType=='["Array"]'}" >
                                                                                        
                                                                                        {
                                                                                            xtype: 'fieldcontainer',
                                                                                            fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}',
                                                                                            layout:'hbox',
                                                                                            items: [
                                                                                                {
                                                                                                    xtype: 'fieldcontainer',layout:'hbox'
                                                                                                },
                                                                                                { 
                                                                                                    xtype:"button",iconCls:'x-fa fa-plus',enableToggle: false,
                                                                                                    handler:function(){
                                                                                                        this.ownerCt.items.items[0].add(
                                                                                                            {
                                                                                                                xtype: 'textfield',
                                                                                                                width: 20,
                                                                                                                height: 20,
                                                                                                                listeners: {
                                                                                                                   
                                                                                                                }
                                                                                                            }
                                                                                                        )
                                                                                                    }
                                                                                                }
                                                                                            ]
                                                                                        },
                                                                                    </g:if>

                                                                                    <g:if test="${it4.optionType=='["Color"]'}" >
                                                                                        
                                                                                        {
                                                                                            xtype: 'fieldcontainer',
                                                                                            fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}',
                                                                                            items: [
                                                                                                {
                                                                                                    xtype: 'textfield',
                                                                                                    width: 180,
                                                                                                    height: 20,
                                                                                                    listeners: {
                                                                                                       
                                                                                                    }
                                                                                                }
                                                                                            ]
                                                                                        },
                                                                                    </g:if>
                                                                                    <g:if test="${it4.optionType=='["number","Function"]'}" >
                                                                                        {
                                                                                            xtype: 'fieldcontainer',
                                                                                            fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}',
                                                                                            layout:'hbox',
                                                                                            items: [
                                                                                                { xtype:'numberfield',style:{width: '150px'}},
                                                                                                { xtype:'combobox',style:{width: '150px'},hidden:true},
                                                                                                /*{ 
                                                                                                    xtype:"button",iconCls:'x-fa fa-cog',enableToggle: true,
                                                                                                    handler:function(){
                                                                                                        console.log(this)
                                                                                                        if (this.pressed) {
                                                                                                            this.ownerCt.items.items[0].hide()
                                                                                                            this.ownerCt.items.items[1].show()
                                                                                                        } else{
                                                                                                            this.ownerCt.items.items[1].hide()
                                                                                                            this.ownerCt.items.items[0].show()
                                                                                                        }
                                                                                                    }
                                                                                                }*/
                                                                                            ]
                                                                                        },
                                                                                    </g:if>

                                                                                    <g:if test="${it4.optionType=='["number","Array"]'}" >
                                                                                        {
                                                                                            xtype: 'fieldcontainer',
                                                                                            fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}',
                                                                                            layout:'hbox',
                                                                                            items: [
                                                                                                { xtype:'numberfield',style:{width: '150px'}},
                                                                                                { xtype:'combobox',style:{width: '150px'},hidden:true},
                                                                                               /* { 
                                                                                                    xtype:"button",iconCls:'x-fa fa-cog',enableToggle: true,
                                                                                                    handler:function(){
                                                                                                        console.log(this)
                                                                                                        if (this.pressed) {
                                                                                                            this.ownerCt.items.items[0].hide()
                                                                                                            this.ownerCt.items.items[1].show()
                                                                                                        } else{
                                                                                                            this.ownerCt.items.items[1].hide()
                                                                                                            this.ownerCt.items.items[0].show()
                                                                                                        }
                                                                                                    }
                                                                                                }*/
                                                                                            ]
                                                                                        },
                                                                                    </g:if>

                                                                                    <g:if test="${it4.optionType=='["string","Object"]'}" >
                                                                                        
                                                                                        {
                                                                                            xtype: 'fieldcontainer',
                                                                                            fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}',
                                                                                            layout:'hbox',
                                                                                            items: [
                                                                                                { xtype:'numberfield',style:{width: '150px'}},
                                                                                                { xtype:'combobox',style:{width: '150px'},hidden:true},
                                                                                                /*{ 
                                                                                                    xtype:"button",iconCls:'x-fa fa-cog',enableToggle: true,
                                                                                                    handler:function(){
                                                                                                        console.log(this)
                                                                                                        if (this.pressed) {
                                                                                                            this.ownerCt.items.items[0].hide()
                                                                                                            this.ownerCt.items.items[1].show()
                                                                                                        } else{
                                                                                                            this.ownerCt.items.items[1].hide()
                                                                                                            this.ownerCt.items.items[0].show()
                                                                                                        }
                                                                                                    }
                                                                                                }*/
                                                                                            ]
                                                                                        },
                                                                                    </g:if>

                                                                                    <g:if test="${it4.optionType=='["Color","Function"]'}" >
                                                                                        
                                                                                        {
                                                                                            xtype: 'fieldcontainer',
                                                                                            fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}',
                                                                                            layout:'hbox',
                                                                                            items: [
                                                                                                { xtype:'numberfield',style:{width: '150px'}},
                                                                                                { xtype:'combobox',style:{width: '150px'},hidden:true},
                                                                                                /*{ 
                                                                                                    xtype:"button",iconCls:'x-fa fa-cog',enableToggle: true,
                                                                                                    handler:function(){
                                                                                                        console.log(this)
                                                                                                        if (this.pressed) {
                                                                                                            this.ownerCt.items.items[0].hide()
                                                                                                            this.ownerCt.items.items[1].show()
                                                                                                        } else{
                                                                                                            this.ownerCt.items.items[1].hide()
                                                                                                            this.ownerCt.items.items[0].show()
                                                                                                        }
                                                                                                    }
                                                                                                }*/
                                                                                            ]
                                                                                        },
                                                                                    </g:if>

                                                                                    <g:if test="${it4.optionType=='["string","Function"]'}" >
                                                                                        
                                                                                        {
                                                                                            xtype: 'fieldcontainer',
                                                                                            fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}',
                                                                                            layout:'hbox',
                                                                                            items: [
                                                                                                { xtype:'numberfield',style:{width: '150px'}},
                                                                                                { xtype:'combobox',style:{width: '150px'},hidden:true},
                                                                                                /*{ 
                                                                                                    xtype:"button",iconCls:'x-fa fa-cog',enableToggle: true,
                                                                                                    handler:function(){
                                                                                                        console.log(this)
                                                                                                        if (this.pressed) {
                                                                                                            this.ownerCt.items.items[0].hide()
                                                                                                            this.ownerCt.items.items[1].show()
                                                                                                        } else{
                                                                                                            this.ownerCt.items.items[1].hide()
                                                                                                            this.ownerCt.items.items[0].show()
                                                                                                        }
                                                                                                    }
                                                                                                }*/
                                                                                            ]
                                                                                        },
                                                                                    </g:if>
                                                                                    <g:if test="${it4.optionType=='["number","string"]' || it4.optionType=='["string","number"]'}" >
                                                                                        
                                                                                        {
                                                                                            xtype: 'fieldcontainer',
                                                                                            fieldLabel: '<font style="font-weight:bold" color=blue>${it4.optionName}</font> ${me.Util.formatOptionId(it4.optionId)}',
                                                                                            layout:'hbox',
                                                                                            items: [
                                                                                                { xtype:'numberfield',style:{width: '150px'}},
                                                                                                { xtype:'combobox',style:{width: '150px'},hidden:true},
                                                                                                /*{ 
                                                                                                    xtype:"button",iconCls:'x-fa fa-cog',enableToggle: true,
                                                                                                    handler:function(){
                                                                                                        console.log(this)
                                                                                                        if (this.pressed) {
                                                                                                            this.ownerCt.items.items[0].hide()
                                                                                                            this.ownerCt.items.items[1].show()
                                                                                                        } else{
                                                                                                            this.ownerCt.items.items[1].hide()
                                                                                                            this.ownerCt.items.items[0].show()
                                                                                                        }
                                                                                                    }
                                                                                                }*/
                                                                                            ]
                                                                                        },
                                                                                    </g:if>
                                                                                    
                                                                                </g:if>
                                                                            </g:each>


                                                                        ]
                                                                    }, 
                                                                </g:each>

                                                                ]

                                                            },
                                                            </g:each>
                                                            
                                                        ]
                                                    }
                                                ]
                                            },

                                            </g:each>


                                        ]
                                    }



                                ]
                            },
                            {
                                title: '图表结构',
                                region:'west',
                                floatable: false,
                                margin: '5 0 0 0',
                                items:[
                                    {
                                        xtype: 'treepanel',
                                        width: 350,
                                        height: 570,
                                        reserveScrollbar: true,
                                        useArrows: true,
                                        rootVisible: false,
                                        multiSelect: false,
                                        singleExpand: true,
                                        dockedItems: [{
                                            xtype: 'toolbar',
                                            dock: 'top',
                                            items: [
                                                { 
                                                    xtype: 'button', text: '折线图',iconCls:'',
                                                    handler:function() {
                                                        Ext.Ajax.request({
                                                            url: '../base/logininfo',
                                                            params: {},
                                                            success:function(response) {
                                                                var res = Ext.JSON.decode(response.responseText)
                                                                console.log(res.userLogin.userName+"("+res.userLogin.userLoginId+")")
                                                                Ext.getCmp('nowUserLogin').setText(res.userLogin.userName+"("+res.userLogin.userLoginId+")")
                                                                Ext.getCmp('nowUserLoginId').setValue(res.userLogin.id)

                                                            }
                                                        });
                                                    }
                                                },
                                                { xtype: 'button', text: '柱状图' },
                                                { xtype: 'button', text: '饼图' },
                                                { xtype: 'button', text: '散点图' },
                                                { xtype: 'button', text: '雷达图' }
                                            ]
                                        }],

                                        columns: [
                                            {
                                                xtype: 'treecolumn', 
                                                text: '',
                                                dataIndex: 'bandName',
                                                flex: 1,
                                                sortable: true
                                            }
                                        ],


                                        store: {
                                            type: 'tree',
                                            folderSort: true,
                                            proxy: {
                                                type: 'ajax',
                                                url: '../app/chartprofilestore'
                                            }
                                        }
                                    }
                                ]
                            },
                            {
                                title: '图表预览',
                                collapsible: false,
                                region: 'center',
                                margin: '5 0 0 0',
                                items:[
                                ],
                                
                            }
                        ],
                        renderTo: Ext.getBody()
                    });            
                    
                    
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_x坐标'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_平行坐标'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_地理坐标'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_角度坐标'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_极坐标'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_平行'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_单坐标'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_区域选择'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_时间行'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_半径坐标'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_y坐标'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_series'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_数据缩放'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_雷达坐标'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_视觉映射'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_日历'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_网格'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_数据集'))
                    Ext.getCmp('chartConfig').remove(Ext.getCmp('tab_图形'))
                    //Ext.getCmp('chartConfig').insert(1,Ext.getCmp('tab0'))

                }
            });
        </script>

</head>

<body>
</body>

</html>